<template>
  <div class="fillcontain">
    <div class="searchArea">
      <el-form size="mini" :inline="true" v-if="$route.name==='Order'">
        <el-form-item label="订单号">
          <el-input 
            v-model="order_no" 
            placeholder="请输入" 
            clearable 
            @clear="resetData()">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="success" 
            size="mini" 
            icon="el-icon-search"
            @click="searchOrder()"
            >查询
          </el-button>
          <el-button 
            :disabled="role.includes('操作员')"
            type="primary" 
            size="mini" 
            icon="el-icon-plus"
            @click="addOrderDialog()"
            >新建订单
           </el-button>
        </el-form-item>
      </el-form>
      <el-form size="mini" :inline="true" v-else>
        <el-form-item label="订单号">
          <el-input 
            v-model="order_no" 
            placeholder="请输入" 
            clearable 
            @clear="resetData()">
          </el-input>
        </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker
            style="width:150px"
            v-model="start"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            style="width:150px"
            v-model="finish"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="success" 
            size="mini" 
            icon="el-icon-search"
            @click="searchOrder()"
            >查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
   <!-- 订单表格 -->
   <div class="table_container">
    <el-table
      size="mini"
      border
      v-loading="loading"
      element-loading-text = "数据正在加载中..."
      element-loading-spinner = "el-icon-loading"
      :data="orderList"
      style="width: 100%"
      align="center">
      <el-table-column
        prop="order_no"
        label="订单号"
        align="center"
        sortable>
      </el-table-column>
      <el-table-column
        prop="contract_no"
        label="合同号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="kind"
        label="合同类型"
        align="center"
        width="75">
      </el-table-column>
      <el-table-column
        prop="order_name"
        label="订单名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="订单数量"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="task_number"
        :label="$route.name==='Order'?'已完成数量':'完成数量'"
        align="center">
      </el-table-column>
      <el-table-column
        label="订单状态"
        align="center"
        width="90">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.order_status==='已完成'?'success':''">{{scope.row.order_status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        prop="start" 
        label="开始时间" 
        align="center">
      </el-table-column>
      <el-table-column 
        prop="finish" 
        label="订单交期" 
        align="center">
      </el-table-column>
      <el-table-column 
        prop="done_time"
        v-if="$route.name==='OrderBack'"
        label="完成时间" 
        align="center">
      </el-table-column>
      <el-table-column 
        v-if="$route.name==='Order'"
        label="操作"
        align="center"
        width="250">
        <template slot-scope="scope">
          <el-button 
            type="success" 
            size="mini"
            @click="toAddTask(scope.row.order_no)"
          >任务管理</el-button>
          <el-button 
            :disabled="role.includes('操作员')"
            type="warning" 
            size="mini"
            @click="updateOrder(scope.row)"
          >修改</el-button>
          <el-button 
            :disabled="role.includes('操作员')"
            type="danger" 
            size="mini"
            @click="deleteOrder(scope.row.order_id)"
          >删除</el-button>
        </template>
      </el-table-column>
      <el-table-column 
        v-else
        label="操作"
        align="center"
        width="120">
        <template slot-scope="scope">
          <el-button 
            type="warning" 
            size="mini"
            @click="toAddTask(scope.row.order_no)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <pagination
      :paginations="paginations"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></pagination>
    <!-- 添加订单对话框 -->
    <order-dialog
      v-if="orderDialog.show" 
      :isShow="orderDialog.show"
      :dialogRow="orderDialog.dialogRow"
      :title="orderDialog.title"
      @closeDialog="hideOrderDialog"
      @getOrderList="getOrderData">
    </order-dialog>
   </div>
  </div>
</template>

<script>
import {orderList,removeOrder} from '@/api/order.js'
import Pagination from "@/components/pagination";
import OrderDialog from "./childComps/OrderDialog.vue"
export default {
 components:{
    Pagination,
    OrderDialog,
 },
  data () {
    return {
       loading: true,  
       order_no:null,
       order_status:'undone',//undone 未完成 doing 进行中
       start:null,
       finish:null,
       orderList:[],
       paginations: {
        index: 1, // 当前位于哪页
        size: 10, // 1页显示多少条
        pageSizes: [ 8, 10, 15,20], //每页显示多少条
        pageTotal: 0, //总记录条数
      },
        orderDialog: {
         show: false,
         dialogRow: {},
         title:''
       },
    }
  },
 created() {
  this.$route.name==='Order'?this.order_status='undone':this.order_status='done'
   this.getOrderData()
 },
 computed:{
  role(){
    return this.$store.getters.roles
  }
 },
 methods:{
   async getOrderData(){
     let params = {
        index: this.paginations.index,
        size: this.paginations.size,
        order_status:this.order_status,
        order_no:this.order_no
      };
     const data= await orderList(params)
     this.orderList=data.data
     this.paginations.pageTotal=data.count
     this.loading = false;
    },
    //订单查询
   async searchOrder(){
       let params={
         order_no:this.order_no,
         start:this.start,
         finish:this.finish,
         order_status:this.order_status,
       }
       const data= await orderList(params)
       this.orderList=data.data
    },
     //清空
    resetData(){
      this.order_no=null
      this.paginations.index=1
      this.getOrderData()
   },
    //添加订单
   addOrderDialog(){
      this.orderDialog.title="添加订单"
      this.orderDialog.show=true
   },
   //修改订单
   updateOrder(row){
     this.orderDialog.title="修改订单"
     this.orderDialog.dialogRow=row 
     this.orderDialog.show=true
   },
    //关闭订单对话框
   hideOrderDialog(){
    this.orderDialog.show=false
   }, 
   //删除订单
   deleteOrder(order_id){
     this.$confirm("此操作将删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          await removeOrder(order_id);
          this.$message.success('删除订单成功！')
          this.getOrderData(); //刷新列表
      })
   },
   //任务管理
   toAddTask(order_no){
   this.$route.name==='Order'? 
   this.$router.push({path:'/pro/task',query:{order_no}}):
   this.$router.push({path:'/his/taskOver',query:{order_no}})
   
   },
      //上下分页
    handleCurrentChange(newPage) {
       this.paginations.index=newPage
       this.getOrderData()
    },
    //每页显示多少条
    handleSizeChange(newCount) {
      this.paginations.size=newCount
      this.getOrderData()
    },
 }
}
</script>
<style lang='scss' scoped>
</style>